import React, {Component, Fragment} from 'react';
import {Card, Button, message} from 'antd';

import './ui.less';

class Messages extends Component {

    handleMessageClick = (type) => {
        message[type]('欢迎登录此系统！');
    };

    handleDurationMessageClick = (duration) => {
        message.success('欢迎登录此系统！', duration);
    };

    handleCloseMessageClick = (duration) => {
        message.success('欢迎登录此系统！', 5, () => {alert('显示时长为：' + duration + '秒')});
    };


    render() {
        return (
            <Fragment>
                <Card title={'全局消息提示'} className={'card-wrap'}>
                    <Button type={'primary'} onClick={() => this.handleMessageClick('info')}>Info</Button>
                    <Button type={'primary'} onClick={() => this.handleMessageClick('loading')}>Loading</Button>
                    <Button type={'primary'} onClick={() => this.handleMessageClick('success')}>Success</Button>
                    <Button type={'primary'} onClick={() => this.handleMessageClick('warn')}>Warn</Button>
                    <Button type={'primary'} onClick={() => this.handleMessageClick('warning')}>Warning</Button>
                    <Button type={'primary'} onClick={() => this.handleMessageClick('error')}>Error</Button>
                </Card>
                <Card title={'全局消息提示延时和关闭后事件'} className={'card-wrap'}>
                    <Button type={'primary'} onClick={() => this.handleDurationMessageClick(10)}>延时10秒</Button>
                    <Button type={'primary'} onClick={() => this.handleCloseMessageClick(5)}>延时后进行关闭的回调</Button>
                </Card>
            </Fragment>
        );
    }
}

export default Messages;